<body class="with_aside_nav with_important_notice fixed-nav-lg">
  
  <div class="important_notice warning">
    <div class="row">
      <div class="col-xs-2" style="font-size: 24px;">
        <i class="magicons-info-round"></i>
      </div>
      <div class="col-xs-8">
        Example pictures from:&nbsp; <a href="http://lorempixel.com/" target="_blank">lorempixel.com</a>
      </div>
      <div class="col-xs-2" style="font-size: 24px;">
        <i class="magicons-info-round"></i>
      </div>
    </div>
  </div>
  
  <div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-lg navbar-slidebar" role="navigation">
    <div class="corset">
    
  
  
      <div class="navbar-header">
        <button type="button" class="navbar-toggle slidebar-toggle" data-target="#front-main-nav-colapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <%= link_to "Magic-Stylez", "#", class: "navbar-brand" %>
      </div>
      <div class="collapse navbar-collapse" id="front-main-nav-colapse">
        <ul class="nav navbar-nav navbar-left">
          <li><%= link_to "Link", "#" %></li>
          <li><%= link_to "Link", "#" %></li>
        
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
              <%= link_to "#", class: "dropdown-toggle", data: {toggle: "dropdown"} do %>
                Dropdown <b class="caret"></b>
              <% end %>
              <ul class="dropdown-menu">
                  <li><%= link_to "Link 1", "#" %></li>
                  <li><%= link_to "Link 2", "#" %></li>
                  <li><%= link_to "Link 3", "#" %></li>
              </ul>
          </li>
          <li><%= link_to "Button", "#", class: "btn btn-success" %></li>
        </ul>
      </div>
    
    </div>
  </div>

  <div id="nav-aside" class="fixed-left">
    <div class="inner-aside">
    
      <div class="aside-btn user-pic">
        <img alt="User Picture" src="http://lorempixel.com/g/50/60/people/" />
      </div>
    
      <a class="aside-btn" href="#" title="Dashboard">
        <i class='glyphicon glyphicon-home'></i>
      </a>    
      <a class="aside-btn active" href="#" title="Settings">
        <i class='glyphicon glyphicon-cog'></i>
      </a>    
      <a class="aside-btn" href="#" title="Inbox">
        <i class='glyphicon glyphicon-inbox'></i>
      </a> 
      <a class="aside-btn" href="#" title="Pictures">
        <i class='glyphicon glyphicon-picture'></i>
      </a> 
    
    </div>
  </div>




<div class="fullpage-table" id="banner-one">
      <div class="table-row">
        <div class="banner-box responsive-hero with-footer with-header fill lorempixel" style="background-image: url('http://lorempixel.com/g/1200/500/nature/')">
          <div class="banner-header">
            <div class="corset">
              <h1 class="loud">Responsive Aside-Nav</h1>
            </div>
          </div>
      
          <div class="banner-content">
            <div class="corset">
              <br/>
              <div class="box blur">
                <table class="name">
                  <tr>
                    <th>body &nbsp;</th>
                    <td>with_aside_nav with_important_notice fixed-nav-lg</td>
                  </tr>
                  <tr>
                    <th>navbar &nbsp;</th>
                    <td>navbar navbar-default navbar-fixed-top navbar-lg navbar-slidebar</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
      
          <div class="banner-footer" id="sign_up_banner">
            <div class="corset">
              <div class="row">
                <div class="col-sm-4 col-sm-offset-1">
                  <!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
                  <button class="btn btn-success btn-block help_arrow hide_da_notice" data-text="Hide notice!">
                    toggle Notice
                  </button>
                </div>
                <div class="col-sm-4 col-sm-offset-2">
                  <!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
                  <button class="btn btn-default btn-block help_arrow get_some_borders" data-text="click!">
                    toggle Borders
                  </button>
                </div>
              </div>
            </div>
          </div>
      
        </div>
      </div>
    </div>

  <div class="main_content">
    
    
    
    
    
  
    <div class="section dark">
      <div class="corset">
        <h1>Responsive Slidebar</h1>
        <br/>
        <p class="loud">
          Turns the usual twbs <em>navbar-collapse</em> into a nice slidebar. .. try it out:<br/>
          make your screen smaller than 768px and press the header-toggle
        </p>
        <br/>
        <h4>dependency:</h4> 
        <code>@import "magic/content/aside_nav";</code>
        <code>@import "magic/content/notice";</code>
      </div>
    </div>
  
    <%= render "templates/lorem" %>
  
  </div>
</body>
